/* $Id: graphicalinput.jquery.js 28 2009-10-22 19:56:28Z geraldb $

Unobtrusive Accessible jQuery Graphical Form Inputs.

Overview:
	jQuery.fn.graphicalinput()
	Wraps inputs with a span to be styled to act like a radio button/checkbox

Parameters:
	prepend: (String) Prepend wrapping span classes with this
		Default: 'graphicalinput'

Usage:
	$('#myform input').graphicalinput()

Authors:
	gburns

TODO:
	Document
*/

(function($) {
$.fn.graphicalinput = function(options) {
	var settings = $.extend({
		prepend: 'graphicalinput'
	}, options || {});

	return this.each(function() {
		var $this = $(this);

		if ( $this.attr('type') == 'radio' || $this.attr('type') == 'checkbox' ) {
			var $wrap = $('<span/>')
				.css({
					display: 'inline-block'
				});

			$this
				.wrap($wrap);

			$wrap = $this.parent();

			if ( $this.is(':checked') ) $wrap.addClass('checked');

			$this
				.bind('focus', function() {
					$wrap
						.addClass('focus');
				})
				.bind('blur', function() {
					$wrap
						.removeClass('focus');
				});

			$wrap
				.bind('mouseover', function() {
					$wrap.addClass('over');
				})
				.bind('mouseout', function() {
					$wrap.removeClass('over');
				})
				.bind('click', function(event) {
					event.stopPropagation();
					$this.click();
					$this.focus();
				});

			if ( $this.attr('type') == 'radio' ) {
				$this
					.bind('click', function(event) {
						event.stopPropagation();
						setTimeout(function() {
							$('input:radio[name=' + $this.attr('name') + ']')
								.parent()
									.removeClass('checked');

							$wrap.addClass('checked');
						}, 0);
					});

				$wrap
					.addClass(settings.prepend + '_radio');
			} else if ( $this.attr('type') == 'checkbox' ) {
				$this
					.bind('click', function(event) {
						event.stopPropagation();
						setTimeout(function() {
							if ( $this.is(':checked') ) {
								$wrap.addClass('checked');
							} else {
								$wrap.removeClass('checked');
							}
						}, 0);
					});

				$wrap
					.addClass(settings.prepend + '_checkbox');
			}
		}
	});
}
})(jQuery);